<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/11/28</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
<div class="register">
    <div class="register-header">
        <div class="register-header-left"><img src="img/del.png" alt="#"></div>
        <div class="register-header-mind">登录</div>
        <div class="register-header-right"><img src="img/menu.png" alt="#"></div>
    </div>
    <div class="register-content">
        <div class="register-content-login">注册</div>
    </div>
    <div class="register-bottom">
        <div class="register-bottom-mind">
            <div class="register-bottom-mind-left" ><img src="img/left.png" alt="#"></div>
            <div class="register-bottom-mind-right" ><img src="img/right.png" alt="#"></div>
        </div>
    </div>
</div>
<div class="bounced animated">
    <div class="bounced-box">
        <p>验证码登录</p>
        <input class="bounced-box-tel" type="text" placeholder="请输入手机号">
        <input class="bounced-box-val" type="text" placeholder="输入6位验证码">
        <div class="bounced-box-time">获取验证码</div>
        <div class="bounced-box-submit">登录</div>
        <div class="bounced-box-del">
            <img src="img/del1.png" alt="#">
            <span></span>
        </div>
    </div>
</div>
<div class="hint animated fadeInDown">请输入正确手机号</div>
<div class="hint">请输入正确手机号或验证码</div>
</body>
<script src="node_modules/lib-flexible/flexible.js"></script>
<script>
    (window.onload =function () {
        const login = $('.register-content-login')[0];
        const del = $('.bounced-box-del')[0];
        const bounced = $('.bounced')[0];
        const hint = $('.hint')[0];
        const hintTwo = $('.hint')[1];
        const tel = $('.bounced-box-tel')[0];
        const val = $('.bounced-box-val')[0];
        const time = $('.bounced-box-time')[0];
        const submit = $('.bounced-box-submit')[0];
        login.addEventListener('click', function () {
            bounced.classList.add('fadeInDown');
            bounced.style.display = 'block';
        });
        del.addEventListener('click', function () {
            bounced.style.display = 'none';
        });
        function debounce (fn, time, immediate) {
            var timer = null;
            return function () {
                var self = this;
                var arg = arguments;
                if(immediate) {
                    fn.apply(this, arg);
                    immediate = false;
                }else{
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        fn.apply(self, arg)
                    }, time)
                }
            }
        }
        function throttle (fn, time) {
            let timer,
                args = arguments,
                start;
            return function loop() {
                let seft = this;
                let now = Date.now();
                if (!start) {
                    start = 0;
                }
                if (now - start >= time) {
                    fn.apply(seft, args);
                    start = now;
                }
            }
        }
        tel.addEventListener('keyup', function () {
            if (/^1[35789]\d{9}$/.test(parseInt(tel.value))){
                time.style.background = '#fe881f';
                time.onclick = throttle(function () {
                    if (/^1[35789]\d{9}$/.test(parseInt(tel.value))){
                        $.ajax({
                            method: 'get',
                            url:'http://localhost:8080/validCodeMsg',
                            data: {
                                phoneNumber: tel.value
                            },
                            success: function (data) {
                                hint.style.display = 'block';
                                hint.innerText = data.msg;
                                setTimeout(() => {
                                    hint.style.display = 'none';
                                },1000);
                                console.log(data);
                            },
                            fail: function (error) {
                                console.log(error);
                            }
                        });
                        let sum = 6;
                        let timer = setInterval(() => {
                            sum--;
                            time.innerText =  sum + '秒后可获取';
                            if (sum === 0) {
                                window.clearInterval(timer);
                                time.innerText = '获取验证码';
                            }
                        },1000);
                    } else {
                        hint.style.display = 'block';
                        setTimeout(() => {
                            hint.style.display = 'none';
                        },1000)
                    }
                }, 6000)
            }else {
                time.style.background = '#cccccc';
                time.innerText = '获取验证码'
            }
        });
        submit.onclick = debounce(function () {
            if (!/^1[37895]\d{9}$/.test(parseInt(tel.value)) || val.value === '') {
                $.ajax({
                    method: 'get',
                    url:'http://localhost:8080/valid',
                    data: {
                        code: val.value
                    },
                    success: function (data) {
                        console.log(data);
                    },
                    fail: function (error) {
                        console.log(error);
                    }
                });
                hintTwo.style.display = 'block';
                setTimeout(() => {
                    hintTwo.style.display = 'none';
                },1000)
            }
        },500)
    })();
</script>
</html>
